<div class="page-title area-col-white detail-page-title">
  <nz-breadcrumb nzSeparator=" ">
    <nz-breadcrumb-item>
      <a [routerLink]="['/fcs-manage/function']" class="breadcrumb_link">
        <i nz-icon nzType="arrow-left" nzTheme="outline" class="breadcrumb_i"></i>
      </a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
      <span class="head-05">{{data?.functionName || ''}}</span>
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <div class="page-title-opt pull-right" *ngIf="data?.id">
    <in-acl-source [inGroup]="'tableAction'" [inService]="'fcs'" [inResourceType]="'fcs-function'"
          [inActions]="['UpdateFunction','DeleteFunction']" [inIsLast]="true" [inInstanceId]="data?.id"
          [inResourceAccountId]="data?.accountId" [inTrData]="data" >
    <button nz-button nz-dropdown nzTrigger="click" [nzDropdownMenu]="versionMenu">版本: {{versionName}}
      <i nz-icon nzType="down"></i>
    </button>
    <nz-dropdown-menu #versionMenu="nzDropdownMenu">
      <nz-table class="version-table" [nzData]="versionList" [nzShowPagination]="versionList?.length > 10" #nzTable>
        <thead>
          <tr class="menu-tr">
            <th nzWidth="1rem">版本名称</th>
            <th nzWidth="1.5rem">描述</th>
            <th nzWidth="1.5rem">流量灰度</th>
            <th nzWidth="1.5rem">创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="version-tr" *ngFor="let data of nzTable.data; let i = index;" (click)="choiceVersion($event,i)">
            <!-- nzLeft="0px" -->
            <td>{{data?.VersionName || '--'}}</td>
            <td style="width:150px;" nz-popover [nzContent]="data?.Description"
              [nzOverlayStyle]="{'max-width': '7rem'}"><span class="table-version-description">{{data?.Description ||
                '--'}}</span></td>
            <td nz-popover [nzContent]="contentTemplate" nzPopoverPlacement="bottom">
              <ng-container *ngIf="data?.flowPercent">
                <ng-container *ngFor="let item of data?.flowPercent; let i = index;">
                  <p style="margin-bottom: 0;" *ngIf="i < 3">{{item}}</p>
                  <p style="margin-bottom: 0;" *ngIf="i == 3">...</p>
                </ng-container>
              </ng-container>
              <ng-template #contentTemplate>
                <ng-container>
                  <ng-container *ngFor="let item of data?.flowPercent">
                    <p style="margin-bottom: 0;">{{item}}</p>
                  </ng-container>
                </ng-container>
              </ng-template>
            </td>
            <td>{{data?.CreateTime | date: 'yyyy-MM-dd HH:mm:ss'|| '--'}}</td>
            <td class="operation">
              <button nz-button nzType="default" class="version-button"
                [disabled]="data?.VersionName === 'LATEST' || functionStatus === 'updating' || data?.flowPercent?.length == 0"
                (click)="tableOperateFunctionAlias('config',data,$event)">流量设置</button>
              <button nz-button nzType="default" class="version-button"
                [disabled]="data?.VersionName === 'LATEST' || functionStatus === 'updating'"
                (click)="deleteVersion($event,data?.VersionName)">删除</button>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-dropdown-menu>
    <!-- 页面顶部“操作”和“配置”按钮 -->
    <span *ngIf="disableOperation" nz-popover [nzContent]="disableOperationContent">
      <button nz-button nz-dropdown nzTrigger="click" [nzDropdownMenu]="operateMenu" [disabled]="true">操作
        <i nz-icon nzType="down"></i>
      </button>
    </span>
    <span *ngIf="!disableOperation">
      <button nz-button nz-dropdown nzTrigger="click" [nzDropdownMenu]="operateMenu">操作
        <i nz-icon nzType="down"></i>
      </button>
      <nz-dropdown-menu #operateMenu="nzDropdownMenu">
        <ul nz-menu>
          <li *ngIf="functionStatus === 'updating'" class="publish-version" nz-menu-item>
            <a style="color:#bfbfbf" (click)="publishNewVersion(data)">发布新版本</a>
          </li>
          <li *ngIf="functionStatus !== 'updating'" nz-menu-item>
            <a (click)="publishNewVersion(data)">发布新版本</a>
          </li>
          <li nz-menu-item>
            <a (click)="operateFunctionAlias('creation',data)">创建别名</a>
          </li>
          <li nz-menu-item>
            <a (click)="deleteFunctionAlias(data)">删除别名</a>
          </li>
          <li nz-menu-item>
            <a (click)="operateFunctionAlias('config',data)">流量设置</a>
          </li>
        </ul>
      </nz-dropdown-menu>
    </span>
    
    
    <span *ngIf="disableConfig" nz-popover [nzContent]="disableConfigContent">
      <in-acl-btn [inActions]="data?.resActions" inAction="UpdateFunction" inLabel="配置"> 
      <button nz-button (click)="editFunction(data)" [disabled]="true">配置
      </button>
    </in-acl-btn>
    </span>
    
    
    <span *ngIf="!disableConfig">
      <in-acl-btn [inActions]="data?.resActions" inAction="UpdateFunction" inLabel="配置"> 
      <button nz-button (click)="editFunction(data)">配置
      </button>
    </in-acl-btn>
    </span>
    
    
    <!-- 页面顶部“操作”和“配置”按钮 end -->
    <in-acl-btn [inActions]="data?.resActions" inAction="DeleteFunction" inLabel="删除"> 
    <button nz-button (click)="deleteFunction(data)">删除
    </button>
    </in-acl-btn>
  </in-acl-source>
  </div>
</div>

<nz-spin [nzSpinning]="isLoading" nzTip="加载中...">
  <div class="form-fieldset form-horizontal form-align-left">
    <fieldset>
      <legend>
        基本信息
      </legend>
      <div class="form-static" nz-row>
        <div nz-col nzSpan="12">
          <div class="form-group">
            <label class="control-label col-em-8">函数名称：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static function-description">{{data?.functionName || '--'}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">所属应用：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{groupDisplayName || '--'}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">区域：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{regionName || '--'}}</p>
            </div>
          </div>

          <ng-container *ngIf="data?.runtime == RuntimeCustomContainer">
            <div class="form-group">
              <label class="control-label col-em-8">自定义镜像：</label>
              <div class="col-em-offset-8">
                <p class="form-control-static function-description">{{data?.containerImage || '--'}}</p>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-em-8">监听端口：</label>
              <div class="col-em-offset-8">
                <p class="form-control-static function-description">{{data?.containerPort || '--'}}</p>
              </div>
            </div>
          </ng-container>

          <!--<div class="form-group">
            <label class="control-label col-em-8">代码大小：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{data?.instanceId || '--'}}</p>
            </div>
          </div>-->
          <div class="form-group">
            <label class="control-label col-em-8">运行内存：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{data?.memorySize || '--'}}MB</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">超时时间：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{data?.timeout || '--'}}秒</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">预留实例数量：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">
                {{data?.reserveNumber != undefined ? data.reserveNumber : '--'}}个</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">单实例并发数量：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">
                {{data?.concurrency != undefined ? data.concurrency : '--'}}个</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">私有网络：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static" *ngIf="data?.enableVpc === 0">关闭</p>
              <p class="form-control-static" *ngIf="data?.enableVpc === 1">开启</p>
            </div>
            <div class="col-em-offset-8" *ngIf="data?.enableVpc ===1">
              <p class="form-control-static">VPC名称: {{data?.vpcInfo?.vpcName || '--'}}</p>
              <p class="form-control-static">子网名称: {{data?.vpcInfo?.subnetName || '--'}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">环境变量：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static ellipsp">
                <ng-container *ngIf="data?.environment && data?.environment.length > 0">
                  <span *ngFor="let env of data?.environment" class="env-span function-description" style="line-height: 10px;">
                    <strong>{{ env.key }}:</strong> {{ env.value }}
                    <a ngxClipboard cbContent="{{env.key}}: {{env.value}}" (cbOnSuccess)="copySuccess()">
                      <i class="iconfont icon-gongnengtubiao-fuzhicopy"></i>
                    </a>
                  </span>
                </ng-container>
                <ng-container *ngIf="!data?.environment || data?.environment.length <= 0">
                  <span class="env-span function-description">--</span>
                </ng-container>
              </p>
            </div>
          </div>
        </div>
        <div nz-col nzSpan="12">
          <div class="form-group">
            <label class="control-label col-em-8">函数状态：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static" [innerHtml]="data?.status | status:'fcs-status' | async">
                {{data?.status || '--'}}
              </p>
            </div>
            <!--<div class="col-em-offset-8" [ngSwitch]="data?.status">
              <p class="form-control-static" *ngSwitchCase="'updating'">更新中</p>
              <p class="form-control-static" *ngSwitchCase="'success'">成功</p>
              <p class="form-control-static" *ngSwitchCase="'failure'">失败</p>
              <p class="form-control-static" *ngSwitchCase="'creating'">创建中</p>
              <p class="form-control-static" *ngSwitchDefault>'--'</p>
            </div>-->
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">运行环境：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">
                {{data?.runtimeShow || '--'}}
              </p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">函数入口：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static function-description">{{data?.handler || '--'}}</p>
            </div>
          </div>

          <ng-container *ngIf="data?.runtime == RuntimeCustomContainer">
            <div class="form-group">
              <label class="control-label col-em-8">Command：</label>
              <div class="col-em-offset-8">
                <p class="form-control-static function-description">{{data?.containerCommand || '--'}}</p>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-em-8">Args：</label>
              <div class="col-em-offset-8">
                <p class="form-control-static function-description">{{data?.containerArgs || '--'}}</p>
              </div>
            </div>
          </ng-container>

          <ng-container *ngIf="data?.initializeHandler && data?.initializeTimeout">
            <div class="form-group">
              <label class="control-label col-em-8">函数初始化入口：</label>
              <div class="col-em-offset-8">
                <p class="form-control-static function-description">{{data?.initializeHandler || '--'}}</p>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-em-8">初始化超时时间：</label>
              <div class="col-em-offset-8">
                <p class="form-control-static function-description">{{data?.initializeTimeout || '--'}}秒</p>
              </div>
            </div>
          </ng-container>

          <div class="form-group">
            <label class="control-label col-em-8">公网访问：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{data?.enablePublic === 0 ? '关闭':'开启' || '--'}}</p>
            </div>
          </div>
          <!--<div class="form-group">
            <label class="control-label col-em-8">单实例并发数量：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{data?.concurrency || '--'}}</p>
            </div>
          </div>-->

          <div class="form-group">
            <label class="control-label col-em-8">创建时间：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">{{(data?.createTime | date:'y-MM-dd HH:mm:ss') || '--'}}
              </p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">更新时间：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static"> {{(data?.updateTime | date:'y-MM-dd HH:mm:ss') || '--'}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">描述：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static function-description">{{data?.description || '--'}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-8">标签：</label>
            <div class="col-em-offset-8">
              <p class="form-control-static">
                <nzi-tms-detail nziResourceType="fcs" [nziInstanceId]="data?.functionId"
                  [nziInstanceName]="data?.functionName" resourceDetailUrl="/ifcs/#/fcs-manage/function/detail/{{data?.groupId}}/{{data?.functionId}}/LATEST"></nzi-tms-detail>
              </p>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</nz-spin>
<nz-tabset id="function-detail-tabset" class="detail-tab mt8 mb8" [nzSelectedIndex]="0">
  <nz-tab [nzTitle]="'代码执行'" *ngIf="data && data.runtime != RuntimeCustomContainer" (nzSelect)="selectTabCode()">
    <app-function-code #functionCodeComponent [fcsInstance]="data" [versionName]="versionName"></app-function-code>
  </nz-tab>
  <nz-tab [nzTitle]="'代码执行'" *ngIf="data && data.runtime == RuntimeCustomContainer">
    <app-http-invoke [groupId]="groupId" [functionId]="functionId" [groupName]="groupName" [functionName]="functionName"
      [fcsInstance]="data" [versionName]="versionName"></app-http-invoke>
  </nz-tab>
  <!--<nz-tab [nzTitle]="'网络配置'">
    <app-net-config [groupId]="groupId" [functionId]="functionId" [versionName]="versionName">
    </app-net-config>
  </nz-tab>-->
	<nz-tab [nzTitle]="'层管理'" *ngIf="data">
    <app-function-layer [layerData]="data" [functionId]="functionId" [groupId]="groupId" (changeData)="changeData($event)"></app-function-layer>
  </nz-tab>
  <nz-tab [nzTitle]="'触发器'" *ngIf="data">
    <ng-template nz-tab>
    <app-function-trigger [groupId]="groupId" [functionId]="functionId" [fcsInstance]="data"
      [groupDisplayName]="groupDisplayName"></app-function-trigger>
    </ng-template>
  </nz-tab>
  <nz-tab [nzTitle]="'日志'" *ngIf="data">
    <app-function-log [groupId]="groupId" [functionId]="functionId"></app-function-log>
  </nz-tab>
  <nz-tab [nzTitle]="'函数指标'" *ngIf="data">
    <app-function-monitor [groupId]="groupId" [functionId]="functionId" [versionName]="versionName">
    </app-function-monitor>
  </nz-tab>
</nz-tabset>